import { Card, Col, Pagination, Row, Table, Tag, Tree,Button } from 'antd'
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
// 引入请求
import {
  getHosDepartmentListRequest,
  getScheduleRuleRequest,
  getFindScheduleRequest
} from '@api/hospital/hospitalList'

// 引入类型
import {
  DepartmentListReturnType,
  bookingScheduleListType,
  findeScheduleReturnType
} from '@api/hospital/model/hospitalListType'

export default function HosSchedule() {
  const navigate = useNavigate()
  const { hoscode } = useParams()
  
  // 设置科室的state
  const [departmentList, setDepartmentList] = useState<DepartmentListReturnType>([])
  // 设置当前页码的state
  const [page, setPage] = useState(1)
  // 设置一页有几条数据的state
  const [limit, setLimit] = useState(3)
  // 设置排班规则的总条数
  const [total, setTotal] = useState(0)
  // 设置科室排班的depcode的状态
  const [depcode, setDepcode] = useState('200040878')
  // 设置科室排班规则的状态
  const [scheduleRule, setScheduleRule] = useState<bookingScheduleListType[]>([])
  // 设置wokeData的state
  const [workDate,setWorkDate] = useState('2022-04-28')
  // 设置医师排班情况的state
  const[doctors,setDoctors]=useState<findeScheduleReturnType>([])

  // 一进入页面就发送请求获取医院科室相关信息
  useEffect(() => {
    const gethosDepartment = async () => {
      const result = await getHosDepartmentListRequest(hoscode as string)
      // console.log(result);

      setDepartmentList(result)

    }
    gethosDepartment()
  }, [])

  // 一进入页面就发送请求获取医院科室排班规则
  useEffect(() => {
    const schedulerule = async () => {
      const re = await getScheduleRuleRequest({ page, limit, hoscode: hoscode as string, depcode })
      // console.log(re);
      setTotal(re.total)
      setScheduleRule(re.bookingScheduleList)
      setWorkDate(re.bookingScheduleList[0].workDate)
    }
    schedulerule()
  }, [page,limit,depcode])

  // 一进入页面就发送请求获取医师排班安排
  useEffect(()=>{
    const findSchedule = async()=>{
    const re =  await getFindScheduleRequest({hoscode:hoscode as string,depcode,workDate})
    console.log(re,'reeeeeee');
    setDoctors(re)
    }
    findSchedule()
  },[workDate,depcode])

  // 树形结构
  const treeData = [
    {
      title: 'parent 1',
      key: '0-0',
      children: [
        {
          title: 'parent 1-0',
          key: '0-0-0',

          children: [
            {
              title: 'leaf',
              key: '0-0-0-0',

            },
            {
              title: 'leaf',
              key: '0-0-0-1',
            },
          ],
        },
        {
          title: 'parent 1-1',
          key: '0-0-1',
          children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],

        },
      ],
    },
  ];
  // 表格结构
  const columns = [
    {
      title: "序号",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "title",
    },
    {
      title: "号源时间",
      dataIndex: "workDate",
    },
    {
      title: "可预约数",
      dataIndex: "reservedNumber",
    },
    {
      title: "挂号费用",
      dataIndex: "amount",
    },
    {
      title: "擅长技能",
      dataIndex: "skill",
    },
  ];

  // 树标签的样式
  const TreeStyle = {
    border: '1px solid #000',
    height: '480px',
    overflow: 'auto',
  }
  return (
    <div>

      <Card>
        <p>选择：北京协和医院/多发性硬化专科门诊/2022-04-28</p>
        <Row>
          <Col span={4}>
            <div style={TreeStyle}>
              <Tree
              onSelect={(depCode:any)=>{
                setDepcode(depCode[0])        
              }}
                treeData={
                  departmentList as []
                }
                fieldNames={
                  {
                    title: 'depname',
                    key: 'depcode'
                  }
                }
                expandedKeys={['a4e171f4cf9b6816acdfb9ae62c414d7']}
              />
            </div>
          </Col>
          <Col span={20}>
            <div style={{ marginLeft: '20px', marginBottom: '20px' }}>
              {
                scheduleRule.map((item,index) => {
                  return (
                    <Tag key={index} onClick={()=>{
                      setWorkDate(item.workDate)
                    }} style={{cursor:'pointer'}}>

                      <p>{item.workDate} {item.dayOfWeek}</p>
                      <p>{item.availableNumber}/{item.reservedNumber}</p>
                    </Tag>
                  )
                })
              }
     
            </div>
            <div style={{ marginLeft: '20px' }}>
              <Pagination
              current={page}
              pageSize={limit}
              total={total}
              pageSizeOptions={[3,5,7]}
              showSizeChanger={true}
              onChange={(page,pageSize)=>{
                setPage(page)
                setLimit(pageSize)
              }}
              />
            </div>
            <div>
              <Table
                dataSource={doctors}
                columns={columns}
                rowKey='id'
                style={{ marginTop: "20px", marginLeft: '20px' }}
                pagination={false}
                >
              </Table>
              <Button onClick={()=>{navigate(-1)}}  style={{ marginTop: "30px", marginLeft: '20px'}}>返回</Button>
            </div>
          </Col>
        </Row>
      </Card>
    </div>
  )
}
